<template>
  <div class="main">
    <div class="loginForm">
      <el-menu class="el-menu-demo" mode="horizontal">
        <el-menu-item index="1" @click="loginByUsername()">账号密码登录</el-menu-item>
        <el-menu-item index="2" @click="loginByPhone">手机号登录</el-menu-item>
      </el-menu>
      <h1>登录</h1>
     <router-view></router-view>
    </div>
  </div>
</template>

<script>
export default {
  name: "LoginView",
methods:{
  loginByPhone(){
    this.$router.push('/web/loginByPhone');
  },
  loginByUsername(){
    this.$router.push('/web/login');
  }
}
}
</script>

<style scoped>
  .main{
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-image: url("@/assets/background.png");
    background-size: cover;

  }
  .main .loginForm{
       padding: 20px;
       width: 400px;
       height: 400px;
       background-color: white;
       border-radius: 10px;
       /*background-color: rgba(255, 255, 255, 0.5);*/
     }
  .main .loginForm h1{
    font-size: 20px;
    font-weight: bold;
    font-weight: normal;
    padding: 10px;
    margin-bottom: 20px;
  }
</style>